<template>
	<view class="player-wrap">
		<view class="player">
			<polyv-player
				:id="domId"
				:playerId="playerIdcont"
				:vid="vid"
				:width="width"
				:height="height"
				:autoplay="autoplay"
				:viewerInfo="viewerInfo"
			  	:marqueeConfig="marqueeConfig"
				@statechange="statechange"
				@timeupdate="timeupdate"
				@error="error">
				<view slot="custom" class="test">自定义插槽</view>
			</polyv-player>
			<button @click="seek">跳转到 30 s</button>
			<button @click="getCurrentTime">获取当前播放时间</button>
			<button @click="changevid">切换视频</button>
		</view>
	</view>
</template>

<script>
	const MD5 = require('../../utils/md5.js');
	// 修改下面的 vid 和 secretkey
	let vid = '88083abbf5bfc681ce7d8cdfb32e73f7_8';//必填 默认加载的视频
	let vid1 = '88083abbf5bfc681ce7d8cdfb32e73f7_8'// 切换视频用到的vid（切换视频示例，也可自行更改成动态传入）
	/**let secretkey = '';// 必填
	let ts = new Date().getTime();
	let sign = MD5.md5(secretkey + vid + ts);**/
	let polyvPlayerContext;
	export default {
		data() {
			return {
				domId: 'polyvPlayer',
				playerIdcont: 'polyvPlayercont',
				autoplay: true, // 是否自动播放
				vid: vid,
				//ts: ts,
				//sign: sign,
				width: '100%',
				height: '300',
				viewerInfo: { // 自定义观众信息
					viewerId: 'polyv-test', // 观众ID
					viewerName: '保利威测试', // 观众昵称
					viewerAvatar: 'https://livestatic.videocc.net/assets/wimages/missing_face.png', // 观众头像URL
					viewerExtraInfo1: 'param3', // 自定义额外信息字段1
					viewerExtraInfo2: 'param4', // 自定义额外信息字段2
					viewerExtraInfo3: 'param5' // 自定义额外信息字段3
				},
				marqueeConfig: {
					text: '红红火火恍恍惚惚',
					fontColor: '#ccc'
				},
				polyvPlayerContext: null,
			}
		},
		onLoad() {
			// 组件ID: id 设置为 'polyvPlayer'，所以下面写成 '#polyvPlayer'
			polyvPlayerContext = this.selectComponent('#polyvPlayer');
		},
		methods: {
			// 切换视频
			changevid() {
				//const ts = new Date().getTime()
				//const sign = MD5.md5(`${secretkey}${vid1}${ts}`);
				polyvPlayerContext.changeVid({
					vid: vid1,
					//ts,
					//sign
				});

			},
			statechange(e) {
				console.log('播放状态变更');
				console.log(e.detail);
			},
			timeupdate(e) {
				/* console.log('播放进度变化');
				console.log(e.detail); */
			},
			error(e) {
				console.error('视频播放出错');
				console.error(e.detail);
			},
			seek() {
				polyvPlayerContext.seek(30);
			},
			getCurrentTime() {
				const getCurrentTime = polyvPlayerContext.getCurrentTime();
				wx.showModal({
					title: '标题', //提示的标题
					content: `${getCurrentTime}`, //提示的内容
					success: function(res) {
					}
				})
			},
			timeupdate(e) {
				// console.log(e.detail);
				this.videoTime = e.detail.currentTime
			},
		}
	}
</script>

<style>
	.player-wrap {
		position: relative;
		width: 100%;
		height: 0;
		padding-bottom: 56.25%;
	}

	.player {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}

	button {
		margin: 20rpx 0;
	}
	.test {
	  color: red;
	  font-weight: bold;
	  position: absolute;
	  top: 50px;
	  left: 50px;
	}
</style>
